<template>
  <wd-tabbar
    fixed
    v-model="tabbarStore.curIdx"
    bordered
    safeAreaInsetBottom
    placeholder
    inactiveColor="#986DF0"
    @change="selectTabBar"
  >
    <block v-for="(item, idx) in tabbarList" :key="item.path">
      <wd-tabbar-item
        v-if="item.iconType === 'wot'"
        :title="item.text"
        :icon="item.icon"
      ></wd-tabbar-item>
      <wd-tabbar-item
        v-else-if="item.iconType === 'unocss' || item.iconType === 'iconfont'"
        :title="item.text"
      >
        <template #icon>
          <view
            h-40rpx
            w-40rpx
            font-size-40rpx
            :class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
          ></view>
        </template>
      </wd-tabbar-item>
      <wd-tabbar-item 
        v-else-if="item.iconType === 'local'" 
        :title="item.text"
        :custom-style="tabbarStore.curIdx === idx ? 'font-weight: bold;' : ''"
      >
        <template #icon>
          <view 
            class="w-52rpx h-52rpx flex-center" 
            :class="tabbarStore.curIdx === idx ? 'bg-#986DF0 rounded-full' : ''"
          >
            <wd-img 
              width="52rpx" 
              height="52rpx" 
              :src="icons[item.icon]" 
            />
          </view>
        </template>
      </wd-tabbar-item>
    </block>
  </wd-tabbar>
</template>

<script setup lang="ts">
// unocss icon 默认不生效，需要在这里写一遍才能生效！注释掉也是生效的，但是必须要有！
// i-carbon-code
import { tabBar } from '@/pages.json'
import { tabbarStore } from './tabbar'
import { icons } from '@/utils/icons'
import { useThemeStore } from '@/store'
// 主题颜色
const { themeConfig } = useThemeStore()

/** tabbarList 里面的 path 从 pages.config.ts 得到 */
const tabbarList = tabBar.list.map((item) => ({ ...item, path: `/${item.pagePath}` }))
let prevIndex = tabbarStore.curIdx;
function selectTabBar({ value: index }: { value: number }) {
  // if (index === 4) {
  //   tabbarStore.setCurIdx(prevIndex);
  //   return uni.showToast({
  //     title: '测试中',
  //     icon: 'none'
  //   })
  // }
  prevIndex = index;
  // 获取当前页面栈数组
  const pages = getCurrentPages();
  // 获取当前页面（数组中的最后一个）
  const currentPage = pages[pages.length - 1];
  // 获取当前页面路径
  const currentPath = '/' + currentPage.route;

  const url = tabbarList[index].path
  if (url === currentPath) return
  tabbarStore.setCurIdx(index)
  uni.switchTab({ url })
}
onLoad(() => {
  // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
  // #ifdef APP-PLUS | H5
  uni.hideTabBar({
    fail(err) {
      console.log('hideTabBar fail: ', err)
    },
    success(res) {
      console.log('hideTabBar success: ', res)
    },
  })
  // #endif
})
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>